﻿@model IndoReputation.Views.ViewModels.ChartMediaModel
@{
    ViewBag.Title = "Chart and Trend about Media";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="chart-and-trend">
    <div class="tabbable tabs-left">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#lA">Global</a></li>
            <li><a data-toggle="tab" href="#lB">Regional</a></li>
            <li><a data-toggle="tab" href="#lC">Country</a></li>
        </ul>
        <div class="tab-content">
            <div id="lA" class="tab-pane active">
                <span class="title">Indonesia's global reputation trend to day</span>
                <div class="div-global-chart">
                    <span class="title">Chart</span>
                    <div class="div-filter">
                        <table class="table-filter">
                            <tr>
                                <td class="td-label">
                                    From Date
                                </td>
                                <td class="td-control">
                                    @(Html.Telerik().DatePicker()
                                        .Name("DateChartFrom")
                                        .Value((DateTime)ViewData["selectedDate"])
                                    )
                                </td>
                                <td class="td-label">
                                    To Date
                                </td>
                                <td class="td-control">
                                    @(Html.Telerik().DatePicker()
                                        .Name("DateChartTo")
                                        .Value((DateTime)ViewData["selectedDate"])
                                    )
                                </td>
                            </tr>
                            <tr>
                                <td class="td-label">
                                    Display
                                </td>
                                <td class="td-control">
                                    <div class="editor-field">
                                        @(Html.Telerik().ComboBoxFor(model => model.ListDisplayBy)
                                                .Name("ListDisplayBy")
                                                .BindTo(new SelectList(Model.ListDisplayBy, "Value", "Text"))
                                                //.Placeholder("Select...")
                                                .SelectedIndex(0)
                                                .Filterable(filtering =>
                                                {
                                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                                })
                                                .HighlightFirstMatch(true)
                                               )
                                    </div>
                                </td>
                                <td class="td-label">
                                    
                                </td>
                                <td class="td-control">
                                    <p class="dvbutton">
                                        <input type="button" name="btnDraw" value="Draw" />
                                    </p>
                                </td>
                            </tr>                            
                        </table>
                    </div>
                    <div class="div-display-chart">
                        @(Html.Telerik().Chart(Model.ListChartData)
                            .Name("ListChartData")
                            .DataBinding(dataBinding => dataBinding.Ajax().Select("_BuildChartMedia", "Chart"))                      
                            .Title(title => title
                                .Text("Indonesia Reputation media chart in the world")
                                .Visible(true)
                            )
                            .Legend(legend => legend
                                .Position(ChartLegendPosition.Bottom)
                                .Visible(true)
                            )                            
                            .Series(series =>
                            {
                                series.Line("Totals").Color("#F6921E").Axis("news").Name("Total Media").Tooltip(tooltip => tooltip.Format("Media: {0:N0}")).Markers(markers => markers.Type(ChartMarkerShape.Circle));
                                //series.Line("AverageMark").Color("#83ABC0").Axis("mark").Name("Average Mark").Tooltip(tooltip => tooltip.Format("Mark: {0:N0}"));                                        
                            })
                            .CategoryAxis(axis => axis
                                        .Categories(s => s.DateString).AxisCrossingValue(0, 100)

                            )
                            //.ValueAxis(axis => axis.Numeric("mark").Labels(labels => labels.Format("{0:#,##0}")).Color("#83ABC0"))
                            .ValueAxis(axis => axis.Numeric("news").Labels(labels => labels.Format("{0:#,##0}")).Color("#F6921E"))
                            .Tooltip(tooltip => tooltip.Visible(true))
                            .HtmlAttributes(new { style = "width: auto; height: auto;" })
                                )
                            </div>
                </div>
                <div class="div-global-trend">
                    <span class="title">Trend</span>
                    <div class="div-filter">
                        <table class="table-filter">                            
                            <tr>
                                <td class="td-label">
                                    Date to Trend
                                </td>
                                <td class="td-control">
                                    @(Html.Telerik().DatePicker()
                                        .Name("DateTrend")
                                        .Value((DateTime)ViewData["selectedDate"])
                                    )                                                                        
                                </td>
                                <td>
                                    <p class="dvbutton">
                                        <input type="button" name="btnTrend" value="Trend" />
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="tabbable tabs-below">
                        <div class="chart-and-trend-hori">
                            <div class="tab-content">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a data-toggle="tab" href="#A">Current trend compare with last year</a></li>
                                    <li><a data-toggle="tab" href="#B">Trend this year</a></li>
                                    <li><a data-toggle="tab" href="#C">Trend year on year</a></li>
                                </ul>
                                <div id="A" class="tab-pane active">
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                To day</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        To day
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendTodayLastyear-totalCurrent" class="number-trend">@Model.trendNewsModel.trendTodayLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayLastyear-totalLast" class="number-trend">@Model.trendNewsModel.trendTodayLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayLastyear-trend" class="number-trend">@Model.trendNewsModel.trendTodayLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This week</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This week
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisWeekLastyear-totalCurrent" class="number-trend">@Model.trendNewsModel.trendThisWeekLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekLastyear-totalLast" class="number-trend">@Model.trendNewsModel.trendThisWeekLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekLastyear-trend" class="number-trend">@Model.trendNewsModel.trendThisWeekLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This month</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This month
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisMonthLastyear-totalCurrent" class="number-trend">@Model.trendNewsModel.trendThisMonthLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthLastyear-totalLast" class="number-trend">@Model.trendNewsModel.trendThisMonthLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthLastyear-trend" class="number-trend">@Model.trendNewsModel.trendThisMonthLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This year</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This year
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisYearLastyear-totalCurrent" class="number-trend">@Model.trendNewsModel.trendThisYearLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearLastyear-totalLast" class="number-trend">@Model.trendNewsModel.trendThisYearLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearLastyear-trend" class="number-trend">@Model.trendNewsModel.trendThisYearLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                                <div id="B" class="tab-pane">
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                To day</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        To day
                                                    </th>
                                                    <th>
                                                        Yesterday
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendTodayThisyear-totalCurrent" class="number-trend">@Model.trendNewsModel.trendTodayThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayThisyear-totalLast" class="number-trend">@Model.trendNewsModel.trendTodayThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayThisyear-trend" class="number-trend">@Model.trendNewsModel.trendTodayThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This week</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This week
                                                    </th>
                                                    <th>
                                                        Last week
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisWeekThisyear-totalCurrent" class="number-trend">@Model.trendNewsModel.trendThisWeekThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekThisyear-totalLast" class="number-trend">@Model.trendNewsModel.trendThisWeekThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekThisyear-trend" class="number-trend">@Model.trendNewsModel.trendThisWeekThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This month</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This month
                                                    </th>
                                                    <th>
                                                        Last month
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisMonthThisyear-totalCurrent" class="number-trend">@Model.trendNewsModel.trendThisMonthThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthThisyear-totalLast" class="number-trend">@Model.trendNewsModel.trendThisMonthThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthThisyear-trend" class="number-trend">@Model.trendNewsModel.trendThisMonthThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This year</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This year
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisYearThisyear-totalCurrent" class="number-trend">@Model.trendNewsModel.trendThisYearThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearThisyear-totalLast" class="number-trend">@Model.trendNewsModel.trendThisYearThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearThisyear-trend" class="number-trend">@Model.trendNewsModel.trendThisYearThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                                <div id="C" class="tab-pane">
                                    <div class="div-panel-table-full">
                                        <table class="global-last-year-today table-trend">
                                            <tr>
                                                <th>
                                                    Year
                                                </th>
                                                <th title="trendYear1-year">
                                                    @Model.trendNewsModel.trendYear1.year
                                                </th>
                                                <th title="trendYear2-year">
                                                    @Model.trendNewsModel.trendYear2.year
                                                </th>
                                                <th title="trendYear3-year">
                                                    @Model.trendNewsModel.trendYear3.year
                                                </th>
                                                <th title="trendYear4-year">
                                                    @Model.trendNewsModel.trendYear4.year
                                                </th>
                                                <th title="trendYear5-year">
                                                    @Model.trendNewsModel.trendYear5.year
                                                </th>
                                            </tr>
                                            <tr class="odd">
                                                <td>
                                                    <span class="number-trend">Total News</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear1-total">@Model.trendNewsModel.trendYear1.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear2-total">@Model.trendNewsModel.trendYear2.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear3-total">@Model.trendNewsModel.trendYear3.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear4-total">@Model.trendNewsModel.trendYear4.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear5-total">@Model.trendNewsModel.trendYear5.total</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="number-trend">Trend (%)</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear1-trend">@Model.trendNewsModel.trendYear1.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear2-trend">@Model.trendNewsModel.trendYear2.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear3-trend">@Model.trendNewsModel.trendYear3.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear4-trend">@Model.trendNewsModel.trendYear4.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear5-trend">@Model.trendNewsModel.trendYear5.trend</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="lB" class="tab-pane">
                <div>
                    <table class="table-filter">
                        <tr>
                            <td class="td-label">
                                Current Region
                            </td>
                            <td class="td-control">
                                @(Html.Telerik().ComboBoxFor(model => model.ListRegion)
                                    .Name("RegionList")
                                    .BindTo(new SelectList(Model.ListRegion, "Value", "Text", Model.CurrentUser.RegionID))
                                    //.Placeholder("Select...")
                                    //.SelectedIndex(0)
                                    .Filterable(filtering =>
                                    {
                                        filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                    })
                                    .HighlightFirstMatch(true)
                                )
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="div-global-chart">
                    <span class="title">Chart</span>
                    <div class="div-filter">
                        <table class="table-filter">
                            <tr>
                                <td class="td-label">
                                    From Date
                                </td>
                                <td class="td-control">
                                    @(Html.Telerik().DatePicker()
                                        .Name("DateChartRegionFrom")
                                        .Value((DateTime)ViewData["selectedDate"])
                                    )
                                </td>
                                <td class="td-label">
                                    To Date
                                </td>
                                <td class="td-control">
                                    @(Html.Telerik().DatePicker()
                                        .Name("DateChartRegionTo")
                                        .Value((DateTime)ViewData["selectedDate"])
                                    )
                                </td>
                            </tr>
                            <tr>
                                <td class="td-label">
                                    Display
                                </td>
                                <td class="td-control">
                                    <div class="editor-field">
                                        @(Html.Telerik().ComboBoxFor(model => model.ListDisplayBy)
                                                .Name("ListDisplayRegionBy")
                                                .BindTo(new SelectList(Model.ListDisplayBy, "Value", "Text"))
                                                //.Placeholder("Select...")
                                                .SelectedIndex(0)
                                                .Filterable(filtering =>
                                                {
                                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                                })
                                                .HighlightFirstMatch(true)
                                               )
                                    </div>
                                </td>
                                <td class="td-label">
                                    
                                </td>
                                <td class="td-control">
                                    <p class="dvbutton">
                                        <input type="button" name="btnDrawRegion" value="Draw" />
                                    </p>
                                </td>
                            </tr>                            
                        </table>
                    </div>
                    <div class="div-display-chart">
                        @(Html.Telerik().Chart(Model.ListChartDataRegion)
                            .Name("ListChartDataRegion")
                            .DataBinding(dataBinding => dataBinding.Ajax().Select("_BuildChartRegionMedia", "Chart"))    
                            .Title(title => title
                                .Text("Indonesia Reputation media chart in the region")
                                .Visible(true)
                            )
                            .Legend(legend => legend
                                .Position(ChartLegendPosition.Bottom)
                                .Visible(true)
                            )                            
                            .Series(series =>
                            {
                                series.Line("Totals").Color("#F6921E").Axis("news").Name("Total Media").Tooltip(tooltip => tooltip.Format("Media: {0:N0}")).Markers(markers => markers.Type(ChartMarkerShape.Circle));
                                //series.Line("AverageMark").Color("#83ABC0").Axis("mark").Name("Average Mark").Tooltip(tooltip => tooltip.Format("Mark: {0:N0}"));                                        
                            })
                            .CategoryAxis(axis => axis
                                        .Categories(s => s.DateString).AxisCrossingValue(0, 100)

                            )
                            //.ValueAxis(axis => axis.Numeric("mark").Labels(labels => labels.Format("{0:#,##0}")).Color("#83ABC0"))
                            .ValueAxis(axis => axis.Numeric("news").Labels(labels => labels.Format("{0:#,##0}")).Color("#F6921E"))
                            .Tooltip(tooltip => tooltip.Visible(true))
                            .HtmlAttributes(new { style = "width: 766px; height: auto;" })
                                )
                            </div>
                </div>
                <div class="div-global-trend">
                    <span class="title">Trend</span>
                    <div class="div-filter">
                        <table class="table-filter">                            
                            <tr>
                                <td class="td-label">
                                    Date to Trend
                                </td>
                                <td class="td-control">
                                    @(Html.Telerik().DatePicker()
                                        .Name("DateTrendRegion")
                                        .Value((DateTime)ViewData["selectedDate"])
                                    )                                                                        
                                </td>
                                <td>
                                    <p class="dvbutton">
                                        <input type="button" name="btnTrendRegion" value="Trend" />
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="tabbable tabs-below">
                        <div class="chart-and-trend-hori">
                            <div class="tab-content">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a data-toggle="tab" href="#AT">Current trend compare with last year</a></li>
                                    <li><a data-toggle="tab" href="#BT">Trend this year</a></li>
                                    <li><a data-toggle="tab" href="#CT">Trend year on year</a></li>
                                </ul>
                                <div id="AT" class="tab-pane active">
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                To day</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        To day
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendTodayLastyear-totalCurrent-region" class="number-trend">@Model.TrendNewsModelRegion.trendTodayLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayLastyear-totalLast-region" class="number-trend">@Model.TrendNewsModelRegion.trendTodayLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayLastyear-trend-region" class="number-trend">@Model.TrendNewsModelRegion.trendTodayLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This week</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This week
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisWeekLastyear-totalCurrent-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisWeekLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekLastyear-totalLast-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisWeekLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekLastyear-trend-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisWeekLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This month</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This month
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisMonthLastyear-totalCurrent-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisMonthLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthLastyear-totalLast-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisMonthLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthLastyear-trend-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisMonthLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This year</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This year
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisYearLastyear-totalCurrent-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisYearLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearLastyear-totalLast-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisYearLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearLastyear-trend-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisYearLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                                <div id="BT" class="tab-pane">
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                To day</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        To day
                                                    </th>
                                                    <th>
                                                        Yesterday
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendTodayThisyear-totalCurrent-region" class="number-trend">@Model.TrendNewsModelRegion.trendTodayThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayThisyear-totalLast-region" class="number-trend">@Model.TrendNewsModelRegion.trendTodayThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayThisyear-trend-region" class="number-trend">@Model.TrendNewsModelRegion.trendTodayThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This week</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This week
                                                    </th>
                                                    <th>
                                                        Last week
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisWeekThisyear-totalCurrent-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisWeekThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekThisyear-totalLast-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisWeekThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekThisyear-trend-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisWeekThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This month</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This month
                                                    </th>
                                                    <th>
                                                        Last month
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisMonthThisyear-totalCurrent-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisMonthThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthThisyear-totalLast-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisMonthThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthThisyear-trend-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisMonthThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This year</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This year
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisYearThisyear-totalCurrent-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisYearThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearThisyear-totalLast-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisYearThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearThisyear-trend-region" class="number-trend">@Model.TrendNewsModelRegion.trendThisYearThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                                <div id="CT" class="tab-pane">
                                    <div class="div-panel-table-full">
                                        <table class="global-last-year-today table-trend">
                                            <tr>
                                                <th>
                                                    Year
                                                </th>
                                                <th title="trendYear1-year-region">
                                                    @Model.TrendNewsModelRegion.trendYear1.year
                                                </th>
                                                <th title="trendYear2-year-region">
                                                    @Model.TrendNewsModelRegion.trendYear2.year
                                                </th>
                                                <th title="trendYear3-year-region">
                                                    @Model.TrendNewsModelRegion.trendYear3.year
                                                </th>
                                                <th title="trendYear4-year-region">
                                                    @Model.TrendNewsModelRegion.trendYear4.year
                                                </th>
                                                <th title="trendYear5-year-region">
                                                    @Model.TrendNewsModelRegion.trendYear5.year
                                                </th>
                                            </tr>
                                            <tr class="odd">
                                                <td>
                                                    <span class="number-trend">Total News</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear1-total-region">@Model.TrendNewsModelRegion.trendYear1.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear2-total-region">@Model.TrendNewsModelRegion.trendYear2.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear3-total-region">@Model.TrendNewsModelRegion.trendYear3.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear4-total-region">@Model.TrendNewsModelRegion.trendYear4.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear5-total-region">@Model.TrendNewsModelRegion.trendYear5.total</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="number-trend">Trend (%)</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear1-trend-region">@Model.TrendNewsModelRegion.trendYear1.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear2-trend-region">@Model.TrendNewsModelRegion.trendYear2.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear3-trend-region">@Model.TrendNewsModelRegion.trendYear3.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear4-trend-region">@Model.TrendNewsModelRegion.trendYear4.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear5-trend-region">@Model.TrendNewsModelRegion.trendYear5.trend</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>    
            </div>
            <div id="lC" class="tab-pane">
                <div>
                    <table class="table-filter">
                        <tr>
                            <td class="td-label">
                                Current Country
                            </td>
                            <td class="td-control">
                                @(Html.Telerik().ComboBoxFor(model => model.ListCountry)
                                    .Name("CountryList")
                                    .BindTo(new SelectList(Model.ListCountry, "Value", "Text", Model.CurrentUser.CountryID))
                                    //.Placeholder("Select...")
                                    //.SelectedIndex(0)
                                    .Filterable(filtering =>
                                    {
                                        filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                    })
                                    .HighlightFirstMatch(true)
                                )
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="div-global-chart">
                    <span class="title">Chart</span>
                    <div class="div-filter">
                        <table class="table-filter">
                            <tr>
                                <td class="td-label">
                                    From Date
                                </td>
                                <td class="td-control">
                                    @(Html.Telerik().DatePicker()
                                        .Name("DateChartCountryFrom")
                                        .Value((DateTime)ViewData["selectedDate"])
                                    )
                                </td>
                                <td class="td-label">
                                    To Date
                                </td>
                                <td class="td-control">
                                    @(Html.Telerik().DatePicker()
                                        .Name("DateChartCountryTo")
                                        .Value((DateTime)ViewData["selectedDate"])
                                    )
                                </td>
                            </tr>
                            <tr>
                                <td class="td-label">
                                    Display
                                </td>
                                <td class="td-control">
                                    <div class="editor-field">
                                        @(Html.Telerik().ComboBoxFor(model => model.ListDisplayBy)
                                                .Name("ListDisplayCountryBy")
                                                .BindTo(new SelectList(Model.ListDisplayBy, "Value", "Text"))
                                                //.Placeholder("Select...")
                                                .SelectedIndex(0)
                                                .Filterable(filtering =>
                                                {
                                                    filtering.FilterMode(AutoCompleteFilterMode.Contains);
                                                })
                                                .HighlightFirstMatch(true)
                                               )
                                    </div>
                                </td>
                                <td class="td-label">
                                    
                                </td>
                                <td class="td-control">
                                    <p class="dvbutton">
                                        <input type="button" name="btnDrawCountry" value="Draw" />
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="div-display-chart">
                        @(Html.Telerik().Chart(Model.ListChartDataCountry)
                            .Name("ListChartDataCountry")
                            .DataBinding(dataBinding => dataBinding.Ajax().Select("_BuildChartCountryMedia", "Chart"))
                            .Title(title => title
                                .Text("Indonesia Reputation media chart in the country")
                                .Visible(true)
                            )
                            .Legend(legend => legend
                                .Position(ChartLegendPosition.Bottom)
                                .Visible(true)
                            )                            
                            .Series(series =>
                            {
                                series.Line("Totals").Color("#F6921E").Axis("news").Name("Total Media").Tooltip(tooltip => tooltip.Format("Media: {0:N0}")).Markers(markers => markers.Type(ChartMarkerShape.Circle));
                                //series.Line("AverageMark").Color("#83ABC0").Axis("mark").Name("Average Mark").Tooltip(tooltip => tooltip.Format("Mark: {0:N0}"));                                        
                            })
                            .CategoryAxis(axis => axis
                                        .Categories(s => s.DateString).AxisCrossingValue(0, 100)

                            )
                            //.ValueAxis(axis => axis.Numeric("mark").Labels(labels => labels.Format("{0:#,##0}")).Color("#83ABC0"))
                            .ValueAxis(axis => axis.Numeric("news").Labels(labels => labels.Format("{0:#,##0}")).Color("#F6921E"))
                            .Tooltip(tooltip => tooltip.Visible(true))
                            .HtmlAttributes(new { style = "width: 766px; height: auto;" })
                                )
                            </div>
                </div>
                <div class="div-global-trend">
                    <span class="title">Trend</span>
                    <div class="div-filter">
                        <table class="table-filter">                            
                            <tr>
                                <td class="td-label">
                                    Date to Trend
                                </td>
                                <td class="td-control">
                                    @(Html.Telerik().DatePicker()
                                        .Name("DateTrendCountry")
                                        .Value((DateTime)ViewData["selectedDate"])
                                    )                                                                        
                                </td>
                                <td>
                                    <p class="dvbutton">
                                        <input type="button" name="btnTrendCountry" value="Trend" />
                                    </p>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="tabbable tabs-below">
                        <div class="chart-and-trend-hori">
                            <div class="tab-content">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a data-toggle="tab" href="#AC">Current trend compare with last year</a></li>
                                    <li><a data-toggle="tab" href="#BC">Trend this year</a></li>
                                    <li><a data-toggle="tab" href="#CC">Trend year on year</a></li>
                                </ul>
                                <div id="AC" class="tab-pane active">
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                To day</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        To day
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendTodayLastyear-totalCurrent-country" class="number-trend">@Model.trendNewsModel.trendTodayLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayLastyear-totalLast-country" class="number-trend">@Model.trendNewsModel.trendTodayLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayLastyear-trend-country" class="number-trend">@Model.trendNewsModel.trendTodayLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This week</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This week
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisWeekLastyear-totalCurrent-country" class="number-trend">@Model.trendNewsModel.trendThisWeekLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekLastyear-totalLast-country" class="number-trend">@Model.trendNewsModel.trendThisWeekLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekLastyear-trend-country" class="number-trend">@Model.trendNewsModel.trendThisWeekLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This month</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This month
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisMonthLastyear-totalCurrent-country" class="number-trend">@Model.trendNewsModel.trendThisMonthLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthLastyear-totalLast-country" class="number-trend">@Model.trendNewsModel.trendThisMonthLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthLastyear-trend-country" class="number-trend">@Model.trendNewsModel.trendThisMonthLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This year</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This year
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisYearLastyear-totalCurrent-country" class="number-trend">@Model.trendNewsModel.trendThisYearLastyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearLastyear-totalLast-country" class="number-trend">@Model.trendNewsModel.trendThisYearLastyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearLastyear-trend-country" class="number-trend">@Model.trendNewsModel.trendThisYearLastyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                                <div id="BC" class="tab-pane">
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                To day</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        To day
                                                    </th>
                                                    <th>
                                                        Yesterday
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendTodayThisyear-totalCurrent-country" class="number-trend">@Model.trendNewsModel.trendTodayThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayThisyear-totalLast-country" class="number-trend">@Model.trendNewsModel.trendTodayThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendTodayThisyear-trend-country" class="number-trend">@Model.trendNewsModel.trendTodayThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This week</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This week
                                                    </th>
                                                    <th>
                                                        Last week
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisWeekThisyear-totalCurrent-country" class="number-trend">@Model.trendNewsModel.trendThisWeekThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekThisyear-totalLast-country" class="number-trend">@Model.trendNewsModel.trendThisWeekThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisWeekThisyear-trend-country" class="number-trend">@Model.trendNewsModel.trendThisWeekThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This month</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This month
                                                    </th>
                                                    <th>
                                                        Last month
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisMonthThisyear-totalCurrent-country" class="number-trend">@Model.trendNewsModel.trendThisMonthThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthThisyear-totalLast-country" class="number-trend">@Model.trendNewsModel.trendThisMonthThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisMonthThisyear-trend-country" class="number-trend">@Model.trendNewsModel.trendThisMonthThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                    <div class="div-panel">
                                        <div class="div-panel-title">
                                            <p>
                                                This year</p>
                                        </div>
                                        <div class="div-panel-table">
                                            <table class="global-last-year-today table-trend">
                                                <tr>
                                                    <th>
                                                        This year
                                                    </th>
                                                    <th>
                                                        Last year
                                                    </th>
                                                    <th>
                                                        Trend
                                                    </th>
                                                </tr>
                                                <tr class="odd">
                                                    <td>
                                                        <span title="trendThisYearThisyear-totalCurrent-country" class="number-trend">@Model.trendNewsModel.trendThisYearThisyear.totalCurrent</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearThisyear-totalLast-country" class="number-trend">@Model.trendNewsModel.trendThisYearThisyear.totalLast</span>
                                                        news
                                                    </td>
                                                    <td>
                                                        <span title="trendThisYearThisyear-trend-country" class="number-trend">@Model.trendNewsModel.trendThisYearThisyear.trend</span>
                                                        %
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                                <div id="CC" class="tab-pane">
                                    <div class="div-panel-table-full">
                                        <table class="global-last-year-today table-trend">
                                            <tr>
                                                <th>
                                                    Year
                                                </th>
                                                <th title="trendYear1-year-country">
                                                    @Model.trendNewsModel.trendYear1.year
                                                </th>
                                                <th title="trendYear2-year-country">
                                                    @Model.trendNewsModel.trendYear2.year
                                                </th>
                                                <th title="trendYear3-year-country">
                                                    @Model.trendNewsModel.trendYear3.year
                                                </th>
                                                <th title="trendYear4-year-country">
                                                    @Model.trendNewsModel.trendYear4.year
                                                </th>
                                                <th title="trendYear5-year-country">
                                                    @Model.trendNewsModel.trendYear5.year
                                                </th>
                                            </tr>
                                            <tr class="odd">
                                                <td>
                                                    <span class="number-trend">Total News</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear1-total-country">@Model.trendNewsModel.trendYear1.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear2-total-country">@Model.trendNewsModel.trendYear2.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear3-total-country">@Model.trendNewsModel.trendYear3.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear4-total-country">@Model.trendNewsModel.trendYear4.total</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear5-total-country">@Model.trendNewsModel.trendYear5.total</span>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <span class="number-trend">Trend (%)</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear1-trend-country">@Model.trendNewsModel.trendYear1.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear2-trend-country">@Model.trendNewsModel.trendYear2.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear3-trend-country">@Model.trendNewsModel.trendYear3.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear4-trend-country">@Model.trendNewsModel.trendYear4.trend</span>
                                                </td>
                                                <td>
                                                    <span class="number-trend" title="trendYear5-trend-country">@Model.trendNewsModel.trendYear5.trend</span>
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                    <div class="clear">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@if (false)
{
    <script src="../../Scripts/jquery-1.7.2-vsdoc.js" type="text/javascript"></script>
}
<script type="text/javascript">    
    function getChart() {
        return $("#ListChartData").data("tChart");
    }

    function getChartRegion() {
        return $("#ListChartDataRegion").data("tChart");
    }

    function getChartCountry() {
        return $("#ListChartDataCountry").data("tChart");
    }

    $('input[name="btnDraw"]').click(function () {
        $("#LoadingImage").show();
        var displayBy = 0;
        var combobox = $('#ListDisplayBy').data('tComboBox');
        var value = combobox.value();
        if (value == 'Month') {
            displayBy = 0;
        }
        else if (value == 'Year') {
            displayBy = 1;
        }
        var d = new Date($('#DateChartFrom').data('tDatePicker').value());
        var dt = new Date($('#DateChartTo').data('tDatePicker').value());
        getChart().rebind({
            dtFrom: d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
            , dtTo: dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
            //, newsCategory: $("#NewsCategoryChart").val()
            , displayBy: displayBy
        });
        $("#LoadingImage").hide();
    });

    $('input[name="btnDrawRegion"]').click(function () {
        $("#LoadingImage").show();
        var comboboxRegion = $('#RegionList').data('tComboBox');
        var valueRegion = comboboxRegion.value();
        var displayBy = 0;
        var combobox = $('#ListDisplayRegionBy').data('tComboBox');
        var value = combobox.value();
        if (value == 'Month') {
            displayBy = 0;
        }
        else if (value == 'Year') {
            displayBy = 1;
        }
        var d = new Date($('#DateChartRegionFrom').data('tDatePicker').value());
        var dt = new Date($('#DateChartRegionTo').data('tDatePicker').value());
        getChartRegion().rebind({
            dtFrom: d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
            , dtTo: dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
            //, newsCategory: $("#NewsCategoryChartRegion").val()
            , displayBy: displayBy
            , regionID: valueRegion
        });
        $("#LoadingImage").hide();
    });

    $('input[name="btnDrawCountry"]').click(function () {
        $("#LoadingImage").show();
        var comboboxCountry = $('#CountryList').data('tComboBox');
        var valueCountry = comboboxCountry.value();
        var displayBy = 0;
        var combobox = $('#ListDisplayCountryBy').data('tComboBox');
        var value = combobox.value();
        if (value == 'Month') {
            displayBy = 0;
        }
        else if (value == 'Year') {
            displayBy = 1;
        }
        var d = new Date($('#DateChartCountryFrom').data('tDatePicker').value());
        var dt = new Date($('#DateChartCountryTo').data('tDatePicker').value());
        getChartCountry().rebind({
            dtFrom: d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
            , dtTo: dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
            //, newsCategory: $("#NewsCategoryChartCountry").val()
            , displayBy: displayBy
            , countryID: valueCountry
        });
        $("#LoadingImage").hide();
    });
    // , newsCategory: $("#NewsCategoryTrend").val()
    $('input[name="btnTrend"]').click(function () {
        $("#LoadingImage").show();
        var d = new Date($('#DateTrend').data('tDatePicker').value());
        $.ajax({
            url: '@Url.Action("_BuildTrend")',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ dtTrend: d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate() }),
            success: function (result) {
                ReBuildTrend(result);
            }
        });
    });
    // , newsCategory: $("#NewsCategoryTrendCountry").val()
    $('input[name="btnTrendRegion"]').click(function () {
        $("#LoadingImage").show();
        var comboboxRegion = $('#RegionList').data('tComboBox');
        var valueRegion = comboboxRegion.value();
        var d = new Date($('#DateTrendRegion').data('tDatePicker').value());
        $.ajax({
            url: '@Url.Action("_BuildTrendRegion")',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ dtTrend: d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(), regionID: valueRegion }),
            success: function (result) {
                ReBuildTrendRegion(result);
            }
        });
    });
    // , newsCategory: $("#NewsCategoryTrendCountry").val()
    $('input[name="btnTrendCountry"]').click(function () {
        $("#LoadingImage").show();
        var comboboxCountry = $('#CountryList').data('tComboBox');
        var valueCountry = comboboxCountry.value();
        var d = new Date($('#DateTrendCountry').data('tDatePicker').value());
        $.ajax({
            url: '@Url.Action("_BuildTrendCountry")',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({ dtTrend: d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate(), countryID: valueCountry }),
            success: function (result) {
                ReBuildTrendCountry(result);
            }
        });
    });

    function ReBuildTrendRegion(html) {
        $('span[title="trendTodayLastyear-totalCurrent-region"]').html(html.trendTodayLastyear.totalCurrent);
        $('span[title="trendTodayLastyear-totalLast-region"]').html(html.trendTodayLastyear.totalLast);
        $('span[title="trendTodayLastyear-trend-region"]').html(html.trendTodayLastyear.trend);
        $('span[title="trendThisWeekLastyear-totalCurrent-region"]').html(html.trendThisWeekLastyear.totalCurrent);
        $('span[title="trendThisWeekLastyear-totalLast-region"]').html(html.trendThisWeekLastyear.totalLast);
        $('span[title="trendThisWeekLastyear-trend-region"]').html(html.trendThisWeekLastyear.trend);
        $('span[title="trendThisMonthLastyear-totalCurrent-region"]').html(html.trendThisMonthLastyear.totalCurrent);
        $('span[title="trendThisMonthLastyear-totalLast-region"]').html(html.trendThisMonthLastyear.totalLast);
        $('span[title="trendThisMonthLastyear-trend-region"]').html(html.trendThisMonthLastyear.trend);
        $('span[title="trendThisYearLastyear-totalCurrent-region"]').html(html.trendThisYearLastyear.totalCurrent);
        $('span[title="trendThisYearLastyear-totalLast-region"]').html(html.trendThisYearLastyear.totalLast);
        $('span[title="trendThisYearLastyear-trend-region"]').html(html.trendThisYearLastyear.trend);
        $('span[title="trendTodayThisyear-totalCurrent-region"]').html(html.trendTodayThisyear.totalCurrent);
        $('span[title="trendTodayThisyear-totalLast-region"]').html(html.trendTodayThisyear.totalLast);
        $('span[title="trendTodayThisyear-trend-region"]').html(html.trendTodayThisyear.trend);
        $('span[title="trendThisWeekThisyear-totalCurrent-region"]').html(html.trendThisWeekThisyear.totalCurrent);
        $('span[title="trendThisWeekThisyear-totalLast-region"]').html(html.trendThisWeekThisyear.totalLast);
        $('span[title="trendThisWeekThisyear-trend-region"]').html(html.trendThisWeekThisyear.trend);
        $('span[title="trendThisMonthThisyear-totalCurrent-region"]').html(html.trendThisMonthThisyear.totalCurrent);
        $('span[title="trendThisMonthThisyear-totalLast-region"]').html(html.trendThisMonthThisyear.totalLast);
        $('span[title="trendThisMonthThisyear-trend-region"]').html(html.trendThisMonthThisyear.trend);
        $('span[title="trendThisYearThisyear-totalCurrent-region"]').html(html.trendThisYearThisyear.totalCurrent);
        $('span[title="trendThisYearThisyear-totalLast-region"]').html(html.trendThisYearThisyear.totalLast);
        $('span[title="trendThisYearThisyear-trend-region"]').html(html.trendThisYearThisyear.trend);
        $('th[title="trendYear1-year-region"]').html(html.trendYear1.year);
        $('th[title="trendYear2-year-region"]').html(html.trendYear2.year);
        $('th[title="trendYear3-year-region"]').html(html.trendYear3.year);
        $('th[title="trendYear4-year-region"]').html(html.trendYear4.year);
        $('th[title="trendYear5-year-region"]').html(html.trendYear5.year);
        $('span[title="trendYear1-total-region"]').html(html.trendYear1.total);
        $('span[title="trendYear2-total-region"]').html(html.trendYear2.total);
        $('span[title="trendYear3-total-region"]').html(html.trendYear3.total);
        $('span[title="trendYear4-total-region"]').html(html.trendYear4.total);
        $('span[title="trendYear5-total-region"]').html(html.trendYear5.total);
        $('span[title="trendYear1-trend-region"]').html(html.trendYear1.trend);
        $('span[title="trendYear2-trend-region"]').html(html.trendYear2.trend);
        $('span[title="trendYear3-trend-region"]').html(html.trendYear3.trend);
        $('span[title="trendYear4-trend-region"]').html(html.trendYear4.trend);
        $('span[title="trendYear5-trend-region"]').html(html.trendYear5.trend);
        $("#LoadingImage").hide();
    }

    function ReBuildTrendCountry(html) {
        $('span[title="trendTodayLastyear-totalCurrent-country"]').html(html.trendTodayLastyear.totalCurrent);
        $('span[title="trendTodayLastyear-totalLast-country"]').html(html.trendTodayLastyear.totalLast);
        $('span[title="trendTodayLastyear-trend-country"]').html(html.trendTodayLastyear.trend);
        $('span[title="trendThisWeekLastyear-totalCurrent-country"]').html(html.trendThisWeekLastyear.totalCurrent);
        $('span[title="trendThisWeekLastyear-totalLast-country"]').html(html.trendThisWeekLastyear.totalLast);
        $('span[title="trendThisWeekLastyear-trend-country"]').html(html.trendThisWeekLastyear.trend);
        $('span[title="trendThisMonthLastyear-totalCurrent-country"]').html(html.trendThisMonthLastyear.totalCurrent);
        $('span[title="trendThisMonthLastyear-totalLast-country"]').html(html.trendThisMonthLastyear.totalLast);
        $('span[title="trendThisMonthLastyear-trend-country"]').html(html.trendThisMonthLastyear.trend);
        $('span[title="trendThisYearLastyear-totalCurrent-country"]').html(html.trendThisYearLastyear.totalCurrent);
        $('span[title="trendThisYearLastyear-totalLast-country"]').html(html.trendThisYearLastyear.totalLast);
        $('span[title="trendThisYearLastyear-trend-country"]').html(html.trendThisYearLastyear.trend);
        $('span[title="trendTodayThisyear-totalCurrent-country"]').html(html.trendTodayThisyear.totalCurrent);
        $('span[title="trendTodayThisyear-totalLast-country"]').html(html.trendTodayThisyear.totalLast);
        $('span[title="trendTodayThisyear-trend-country"]').html(html.trendTodayThisyear.trend);
        $('span[title="trendThisWeekThisyear-totalCurrent-country"]').html(html.trendThisWeekThisyear.totalCurrent);
        $('span[title="trendThisWeekThisyear-totalLast-country"]').html(html.trendThisWeekThisyear.totalLast);
        $('span[title="trendThisWeekThisyear-trend-country"]').html(html.trendThisWeekThisyear.trend);
        $('span[title="trendThisMonthThisyear-totalCurrent-country"]').html(html.trendThisMonthThisyear.totalCurrent);
        $('span[title="trendThisMonthThisyear-totalLast-country"]').html(html.trendThisMonthThisyear.totalLast);
        $('span[title="trendThisMonthThisyear-trend-country"]').html(html.trendThisMonthThisyear.trend);
        $('span[title="trendThisYearThisyear-totalCurrent-country"]').html(html.trendThisYearThisyear.totalCurrent);
        $('span[title="trendThisYearThisyear-totalLast-country"]').html(html.trendThisYearThisyear.totalLast);
        $('span[title="trendThisYearThisyear-trend-country"]').html(html.trendThisYearThisyear.trend);
        $('th[title="trendYear1-year-country"]').html(html.trendYear1.year);
        $('th[title="trendYear2-year-country"]').html(html.trendYear2.year);
        $('th[title="trendYear3-year-country"]').html(html.trendYear3.year);
        $('th[title="trendYear4-year-country"]').html(html.trendYear4.year);
        $('th[title="trendYear5-year-country"]').html(html.trendYear5.year);
        $('span[title="trendYear1-total-country"]').html(html.trendYear1.total);
        $('span[title="trendYear2-total-country"]').html(html.trendYear2.total);
        $('span[title="trendYear3-total-country"]').html(html.trendYear3.total);
        $('span[title="trendYear4-total-country"]').html(html.trendYear4.total);
        $('span[title="trendYear5-total-country"]').html(html.trendYear5.total);
        $('span[title="trendYear1-trend-country"]').html(html.trendYear1.trend);
        $('span[title="trendYear2-trend-country"]').html(html.trendYear2.trend);
        $('span[title="trendYear3-trend-country"]').html(html.trendYear3.trend);
        $('span[title="trendYear4-trend-country"]').html(html.trendYear4.trend);
        $('span[title="trendYear5-trend-country"]').html(html.trendYear5.trend);
        $("#LoadingImage").hide();
    }

    function ReBuildTrend(html) {
        $('span[title="trendTodayLastyear-totalCurrent"]').html(html.trendTodayLastyear.totalCurrent);
        $('span[title="trendTodayLastyear-totalLast"]').html(html.trendTodayLastyear.totalLast);
        $('span[title="trendTodayLastyear-trend"]').html(html.trendTodayLastyear.trend);
        $('span[title="trendThisWeekLastyear-totalCurrent"]').html(html.trendThisWeekLastyear.totalCurrent);
        $('span[title="trendThisWeekLastyear-totalLast"]').html(html.trendThisWeekLastyear.totalLast);
        $('span[title="trendThisWeekLastyear-trend"]').html(html.trendThisWeekLastyear.trend);
        $('span[title="trendThisMonthLastyear-totalCurrent"]').html(html.trendThisMonthLastyear.totalCurrent);
        $('span[title="trendThisMonthLastyear-totalLast"]').html(html.trendThisMonthLastyear.totalLast);
        $('span[title="trendThisMonthLastyear-trend"]').html(html.trendThisMonthLastyear.trend);
        $('span[title="trendThisYearLastyear-totalCurrent"]').html(html.trendThisYearLastyear.totalCurrent);
        $('span[title="trendThisYearLastyear-totalLast"]').html(html.trendThisYearLastyear.totalLast);
        $('span[title="trendThisYearLastyear-trend"]').html(html.trendThisYearLastyear.trend);
        $('span[title="trendTodayThisyear-totalCurrent"]').html(html.trendTodayThisyear.totalCurrent);
        $('span[title="trendTodayThisyear-totalLast"]').html(html.trendTodayThisyear.totalLast);
        $('span[title="trendTodayThisyear-trend"]').html(html.trendTodayThisyear.trend);
        $('span[title="trendThisWeekThisyear-totalCurrent"]').html(html.trendThisWeekThisyear.totalCurrent);
        $('span[title="trendThisWeekThisyear-totalLast"]').html(html.trendThisWeekThisyear.totalLast);
        $('span[title="trendThisWeekThisyear-trend"]').html(html.trendThisWeekThisyear.trend);
        $('span[title="trendThisMonthThisyear-totalCurrent"]').html(html.trendThisMonthThisyear.totalCurrent);
        $('span[title="trendThisMonthThisyear-totalLast"]').html(html.trendThisMonthThisyear.totalLast);
        $('span[title="trendThisMonthThisyear-trend"]').html(html.trendThisMonthThisyear.trend);
        $('span[title="trendThisYearThisyear-totalCurrent"]').html(html.trendThisYearThisyear.totalCurrent);
        $('span[title="trendThisYearThisyear-totalLast"]').html(html.trendThisYearThisyear.totalLast);
        $('span[title="trendThisYearThisyear-trend"]').html(html.trendThisYearThisyear.trend);
        $('th[title="trendYear1-year"]').html(html.trendYear1.year);
        $('th[title="trendYear2-year"]').html(html.trendYear2.year);
        $('th[title="trendYear3-year"]').html(html.trendYear3.year);
        $('th[title="trendYear4-year"]').html(html.trendYear4.year);
        $('th[title="trendYear5-year"]').html(html.trendYear5.year);
        $('span[title="trendYear1-total"]').html(html.trendYear1.total);
        $('span[title="trendYear2-total"]').html(html.trendYear2.total);
        $('span[title="trendYear3-total"]').html(html.trendYear3.total);
        $('span[title="trendYear4-total"]').html(html.trendYear4.total);
        $('span[title="trendYear5-total"]').html(html.trendYear5.total);
        $('span[title="trendYear1-trend"]').html(html.trendYear1.trend);
        $('span[title="trendYear2-trend"]').html(html.trendYear2.trend);
        $('span[title="trendYear3-trend"]').html(html.trendYear3.trend);
        $('span[title="trendYear4-trend"]').html(html.trendYear4.trend);
        $('span[title="trendYear5-trend"]').html(html.trendYear5.trend);
        $("#LoadingImage").hide();
    }
</script>
